<template>
	<view>
		<view class="status_bar my-bg-write">
			
		</view>
		<view style="background-color: #FFFFFF;">
			<view :style="{height:height+'px'}" style="background-color: #FFFFFF;width: 100%;padding: 40rpx;">
				<view class="content">
					<view style="text-align: center;font-size: 48rpx;font-weight: 900;">欢迎登录</view>
					<view style="margin-top: 80rpx;">
						<input class="u-border-bottom" style="margin-top: 40rpx;" type="text" v-model="id"
							placeholder="请输入id号" />
						<input class="u-border-bottom" style="margin-top: 40rpx;" type="password" v-model="password"
							placeholder="请输入密码" />
					</view>
					<view style="margin-top: 40rpx;">
						<view style="margin: 10rpx 0 20rpx 0;display: flex;justify-content: space-between;color: #555555;">
							<view class="pwd" @click="toRegister">用户注册</view>
							<!-- <view class="issue">忘记密码</view> -->
						</view>
						<u-button @click="doLogin" :loading="dologinButtonLoading" shape="square" size="default" :ripple="true"
							type="warning">登录</u-button>
					</view>
				</view>
			</view>
		</view>
			<!-- 消息提示 -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				show: true,
				loginButtonLoading: false,
				reloadUserinfoLoading:false,
				
				// 登录部分
				dologinButtonLoading: false,
				id: "",
				password: "",
				height: this.swiperHeight+52,
				tuser:null,
			}
		},
		created() {
			// uni.connectSocket({
			//   url: this.chatUrl,
			//   complete(q) {
			//   	console.log(q)
			//   }
			// });
			// uni.onSocketOpen(function (res) {
			//   console.log('WebSocket连接已打开！');
			// });
			// uni.onSocketError(function (res) {
			//   console.log('WebSocket连接打开失败，请检查！');
			// });
			// uni.onSocketMessage(function (res) {
			//   console.log('收到服务器内容：' + res.data);
			// });
		},
		methods: {
			...mapMutations(['login', 'logout']),
			//登录操作
			//登录之后需要重启整个项目！
			doLogin() {
				this.dologinButtonLoading = true
				console.log(this.id)
				console.log(this.password)
				var that = this
				var tuser = {
					id: that.id,
					password: that.password
				}
				console.log(tuser)
				//先请求数据库，再存储
				uni.request({
					url: that.url.tuser.login,
					method: 'POST',
					data: JSON.stringify(tuser),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						if (res.data.msg == "success") {
							//用户登录信息放入缓存中
							that.login(res.data.user)
							console.log(res)
							//返回前一个页面
							// TODO 登录成功之后，需要给websocket发送一个消息。
							uni.navigateBack({
							    delta: 1
							});
						} else {
							that.showTips(3000, res.data.msg, "error")
							console.log(res.data.msg);
							that.password = ""
						}
			
					},
					fail: (res) => {
						that.showTips(3000, res.data.msg, "error")
						console.log(res)
					}
				});
				this.dologinButtonLoading = false
			},
			showTips(duration, title, type) {
				this.$refs.uTips.show({
					duration: duration,
					title: title,
					type: type
				});
			},
			toRegister() {
				// uni.navigateTo({
				// 	url: '/pages/register/register'
				// });
			},
			sendSocketMessage(dataContent) {
				var data = JSON.stringify(dataContent)
				console.log(data)
			    uni.sendSocketMessage({
			      data: data,
				  complete(q) {
					  //发送成功后，服务器需要返回可靠字段
					  //服务器把未读消息发送过来，然后存入缓存中。
				  	console.log(q)
				  }
			    });
			},
			reloadUserinfo(){
				this.reloadUserinfoLoading = true;
				uni.request({
					url: this.url.user.update,
					method: 'POST',
					data: JSON.stringify(this.loginUserInfo),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						if (res.data.msg == "success") {
							this.doRegisterButtonLoading = false
							this.reloadUserinfoLoading = false;
						}else{
							this.showTips(3000, res.data.msg, "error")
						}
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			}
		}
	}
</script>

<style>
	
</style>
